<!DOCTYPE html>
<html>
<head>
    <title>Leaflet图层控制示例</title>
    <meta charset="utf-8"/>
    <!-- 添加第二个meta charset声明以确保字符编码 -->
    <meta charset="utf-8"/>
    <!-- 引入Leaflet CSS样式 -->
    <link rel="stylesheet" href="leaflet/leaflet.css"/>
    <!-- 引入Leaflet JavaScript库 -->
    <script src="leaflet/leaflet.js"></script>
    <!-- 引入Leaflet折线装饰器插件 -->
    <script src="leaflet/leaflet.polylineDecorator.js"></script>
    <style>
        /* 设置地图容器样式 */
        #map {
            position: absolute;
            height: 100%;
            right: 0;
            left: 0;
        }
    </style>
</head>
<body>
<!-- 地图容器 -->
<div id="map"></div>

<script>
    // 初始化地图，设置初始中心点和缩放级别
    var map = L.map('map').setView([22.2828, 113.5621], 13);

    // 创建基础图层（使用高德地图）
    L.tileLayer("http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=2&scale=3&style=8&x={x}&y={y}&z={z}", {
        attribution: '&copy; 高德地图',  // 版权声明
        maxZoom: 18,  // 最大缩放级别
        minZoom: 3,   // 最小缩放级别
        subdomains: "1234",  // 子域名
        zoom: 3       // 初始缩放级别
    }).addTo(map);  // 将图层添加到地图

    // 定义无人机图标
    var planeIcon = L.icon({
        iconSize: [20, 20],      // 图标尺寸
        iconAnchor: [10, 10],    // 图标锚点（中心点）
        iconUrl: 'img/plane.png' // 图标图片路径
    });

    // 无人机动态标记的集合（按无人机编号存储）
    var layersAnimatedMarkers = {};
    // 无人机航线的集合（按无人机编号存储）
    var layerRoutes = {};
    // 无人机实时飞行轨迹的集合（按无人机编号存储）
    var layersRealRouteLatlngs = {};

    /**
     * 更新无人机位置并绘制实时轨迹
     * @param {Array} latlng - 经纬度数组 [纬度, 经度]
     * @param {string} number - 无人机编号
     */
    function iconMoving(latlng, number) {
        // 更新无人机位置
        layersAnimatedMarkers[number].setLatLng(latlng);

        // 更新实时轨迹点
        layersRealRouteLatlngs[number][1] = latlng;

        // 绘制实时轨迹线
        L.polyline(layersRealRouteLatlngs[number], {
            weight: 5,          // 线宽
            color: '#FF9900'    // 橙色
        }).addTo(map);

        // 更新轨迹起点为当前位置
        layersRealRouteLatlngs[number][0] = latlng;
    }

    /**
     * 绘制初始航线
     * @param {Array} routes - 航线点数组 [[纬度, 经度], ...]
     * @param {number} option - 选项 (0=初始航线, 1=新指令航线)
     * @param {string} number - 无人机编号
     */
    function ployInitialRouteLine(routes, option, number) {
        // 如果option为1，表示是新的指令航线（红色）
        if (option === 1) {
            layerRoutes[number] = L.polyline(routes, {
                weight: 5,      // 线宽
                color: "red"    // 红色
            }).addTo(map);
        }
        // 否则是初始航线（默认颜色）
        else {
            // 设置地图视图到航线起点
            // map.setView(routes[0], 13);

            // 创建航线
            layerRoutes[number] = L.polyline(routes, {
                weight: 5  // 线宽
            }).addTo(map);

            // 在起点添加无人机标记
            addMarker(routes[0], number);

            // 初始化实时轨迹数组
            layersRealRouteLatlngs[number] = [];
            layersRealRouteLatlngs[number][0] = routes[0];
        }

        // 在航线上添加方向箭头
        addWaypointDecorator(layerRoutes[number]);
    }

    /**
     * 添加无人机标记
     * @param {Array} latlng - 经纬度数组 [纬度, 经度]
     * @param {string} number - 无人机编号
     */
    function addMarker(latlng, number) {
        // 设置地图视图到标记位置
        map.setView(latlng, 13);

        // 创建标记并添加到地图
        layersAnimatedMarkers[number] = L.marker(latlng, {
            icon: planeIcon,  // 使用无人机图标
        })
        // 绑定弹出窗口（显示无人机编号）
        .bindPopup(number, {
            minWidth: 0,
            maxWidth: 100
        })
        .addTo(map);
    }

    /**
     * 在航线上添加方向箭头装饰
     * @param {L.Polyline} layerRoute - 航线对象
     */
    function addWaypointDecorator(layerRoute) {
        // 创建折线装饰器
        L.polylineDecorator(layerRoute, {
            patterns: [{
                repeat: 50,  // 箭头重复间隔（像素）
                // 创建箭头符号
                symbol: L.Symbol.arrowHead({
                    pixelSize: 5,    // 箭头大小
                    headAngle: 75,    // 箭头角度
                    polygon: false,   // 不使用多边形
                    // 箭头样式
                    pathOptions: {
                        stroke: true,   // 描边
                        weight: 2,      // 线宽
                        color: '#FFFFFF' // 白色
                    }
                })
            }]
        }).addTo(map);  // 添加到地图
    }
</script>
</body>
</html>